<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>  
<%@ taglib prefix="display" uri="http://displaytag.sf.net" %>
<!--dettaglio_utente.jsp-->
<style>
#dettaglio_pub .testo_info{
	margin:17px 23px;
}
#dettaglio_pub .testo_info span{
	width:142px;
	display:inline-table;
}
</style>
<script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery.tools.min.js"></script>
	<!-- INIZIO SVILUPPO TABELLA IL MIO PROFILO -->
				<div id="ilmioprofilo">
					<h3><span>Il mio profilo</span></h3>
					<div id="tabella_mioprofilo">
						<ul id="mioprofilo_menu">
							<img src="<%=request.getContextPath()%>i/avatar.jpg" alt="avatar" width="97" height="97" />
							<li style="float: left; height: 16px; margin-left: 8px; margin-right: 23px; width: 16px;" id="foto" class="mioprofilo"><a></a></li>
							<li style="float: left; height: 16px; width: 16px; margin-right: 22px;" id="profilo" class="mioprofilo"><a></a></li>
							<li style="float: left; width: 16px; height: 16px;" id="info" class="mioprofilo"><a></a></li>
						</ul>
						<table id="tabella">
							<tbody>
								<tr>
									<td class="cella1 cella">Nome: </td>
									<td class="cella2 cella"><c:out value="${dettaglio.nome}"/></td>
									<td class="cella1 cella">Cognome: </td>
									<td class="cella2 cella"><c:out value="${dettaglio.cognome}"/></td>
								</tr>
								<tr class="riga">
									<td class="cella1 cella">Telefono: </td>
									<td class="cella2 cella"><c:out value="${dettaglio.tel}"/></td>
									<td class="cella1 cella">Email: </td>
									<td class="cella2 cella"><c:out value="${dettaglio.email}"/></td>
								</tr>
								<tr>
									<td class="cella1 cella">Registro REA: </td>
									<td class="cella2 cella"><c:out value="${dettaglio.ides.descValoIdes}"/></td>
									<td class="cella1 cella"> </td>
									<td class="cella2 cella"> </td>
								</tr>
								<tr>
									<td class="cella1 cella">Nato a: </td>
									<td class="cella2 cella">Roma</td>
									<td class="cella1 cella">Il: </td>
									<td class="cella2 cella"><c:out value="${dettaglio.dataNasc}"/></td>
								</tr>
								<tr>
									<td class="cella1 cella">Ragione Sociale</td>
									<td class="cella2 cella"><c:out value="${dettaglio.ragiSoci}"/></td>
									<td class="cella1 cella">Citt&agrave;: </td>
									<td class="cella2 cella">Roma</td>
								</tr>
								<tr>
									<td style="border-bottom:0px;" class="cella1 cella last">Targa N&#176;: </td>
									<td style="border-bottom:0px;" class="cella2 cella last">CD553NO</td>
									<td style="border-bottom:0px;" class="cella1 cella last"> </td>
									<td style="border-bottom:0px;" class="cella2 cella last"> </td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<!-- FINE IL MIO PROFILO -->
				
		<c:if test="${!dettaglio.accessoPubblico }" >
		<br/><br/>
		</c:if>
	
	<c:if test="${dettaglio.accessoPubblico }" >					
			<div id="corse_recenti">
			<h3><span>Reputazione</span></h3>
			<div id="dettaglio_pub">
				<div class="gen_div" style="display:inline-table;">
					<div style="width:405px;float:left;">
						<p class="testo_info"><span class="span_1">Feedback ricevuti:  </span><c:out value="${totFeedback}" /></p>
						<p class="testo_info"><span class="span_1">Positivi: </span><c:out value="${totPos}" />  (<strong><c:out value="${perc}" /> % positivi</strong>)</p>
						<p class="testo_info"><span class="span_1">Negativi: </span><span class="span_2"><c:out value="${totNeg}" />  - <c:out value="${servizio.cliente.telefono}" /> - <c:out value="${servizio.cliente.email}" /> </span> </p>
						<p class="testo_info"><span class="span_1">Neutrali: </span><span class="span_2"><c:out value="${totNeu}" /></span> </p>
					</div>
					<div style="float: left; width: 543px;">
					 <div class="lowAlertBox" rel="#feedbackTable">
							<img src="<%=request.getContextPath()%>/i/notificationicon.png" style="float: left; margin-right: 4px;">
								3 clients need to give feedback on your service.
					 </div>
					 <div  class="highAlertBox">
							<img src="<%=request.getContextPath()%>/i/notificationicon.png" style="float: left; margin-right: 4px;"> you have 2 feedbacks pending.
							<a style="color:blue;">click here</a>
					 </div>
					</div>
					<div style="width: 100%; display: inline-table;">
						<table id="commentsTable" style="width: 100%;" cell-spacing="0" cell-padding="0" border="0">
							<thead>
							<tr>
									<th></th><th>Comment</th><th>From</th><th></th>
								</tr>
							</thead>
							<tbody>
								
								<tr class="alternatingRow">
								            <td valign="bottom"><img src="<%=request.getContextPath()%>/images/plus.jpg" height="20" width="20"></td>
								            <td>fantastic,item was sent by email same day</td>
								            <td>Buyer</td>
											<td style="text-decoration:underline;color:#0055FF"> Alexandra I/T services (12 <img src="<%=request.getContextPath()%>/images/yellowstar.jpg" height="20" width="20">)</td> 
								</tr>
								<tr>
								              <td><img src="<%=request.getContextPath()%>/images/plus.jpg" height="20" width="20"></td>
								            <td>Very fast and clever technique</td>
								            <td>Buyer </td>
									      <td style="text-decoration:underline;color:#0055FF"> Merchant daves  (20  <img src="<%=request.getContextPath()%>/images/greenstar.jpg" height="20" width="20">)</td>
								</tr>
								<tr class="alternatingRow">
								            <td><img src="<%=request.getContextPath()%>/images/plus.jpg" height="20" width="20"></td>
								            <td>fantastic,item was sent by email same day</td>
								            <td>Buyer</td>
											<td style="text-decoration:underline;color:#0055FF"> Alexandra I/T services (12 <img src="<%=request.getContextPath()%>/images/yellowstar.jpg" height="20" width="20">)</td> 
								</tr>
								<tr>
								              <td><img src="<%=request.getContextPath()%>/images/plus.jpg" height="20" width="20"></td>
								            <td>Very fast and clever technique</td>
								            <td>Buyer </td>
									      <td style="text-decoration:underline;color:#0055FF"> Merchant daves  (20  <img src="<%=request.getContextPath()%>/images/bluestar.jpg" height="20" width="20">)</td>
								</tr>
							</tbody>
						</table>						
					</div>
				</div>
				
				
				 <div id="customtable" class="listaJtable"> </div>
			</div>
			</div>
			<div>
			

			</c:if>
			</div>
			
			</div>
			</div>
			<style>
				.feedbackTable table tr td{
					padding:5px;
					font-size:13px;
						color:#ffffff;	
				}
				.feedbackTable table tr td h3{
					font-size:13px;	
					font-weight:bold;
					color:#ffffff;			
				}
			</style>
<div class="apple_overlay feedbackTable" style="background-color:#176EB0;border:1px #04121D solid;" id="customerfeedbackTable">
 
 <div style="color:#FED574;font-size:17px;text-align:left;margin-bottom:10px;padding-left:5px;font-weight:bold;">
 	customer pending feedbacks
 </div>
 
 
 <table border="1"align="center" style=width:500px;>
 <tr>
 <td><h3>nome utente</h3></td>
 <td><h3>id servizio</h3></td>
 <td><h3>action</h3></td>
</tr>
<tr>
<td>hg hhghfghfdgh</td>
<td> hfdgh dfhdfhfdgh fh</td>
<td><a>approve</a></td>
</tr> 
<tr>
<td>hg hhghfghfdgh</td>
<td> hfdgh dfhdfhfdgh fh</td>
<td><a>approve</a></td>
</tr> 
<tr>
<td>hg hhghfghfdgh</td>
<td> hfdgh dfhdfhfdgh fh</td>
<td><a>approve</a></td>
</tr> 
<tr>
<td>hfdgh dfhdfhfdgh fh</td>
<td>hfdgh dfhdfhfdgh fh</td>
<td><a>approve</a></td>
</tr> 
</table>
 
</div>
<div class="apple_overlay feedbackTable" style="background-color:#176EB0" id="yourfeedbackTable">
 
 <div style="color:#FFF79C;font-size:17px;text-align:left;margin-bottom:10px;padding-left:5px;font-weight:bold;">
 	your pending feedbacks
 </div>
 
 
 <table border="1"align="center" style=width:500px;>
 <tr>
 <td><h3>nome utente</h3></td>
 <td><h3>id servizio</h3></td>
 <td><h3>action</h3></td>
</tr>
<tr>
<td>hg hhghfghfdgh</td>
<td> hfdgh dfhdfhfdgh fh</td>
<td><a>approve</a></td>
</tr> 
<tr>
<td>hg hhghfghfdgh</td>
<td> hfdgh dfhdfhfdgh fh</td>
<td><a>approve</a></td>
</tr> 
<tr>
<td>hg hhghfghfdgh</td>
<td> hfdgh dfhdfhfdgh fh</td>
<td><a>approve</a></td>
</tr> 
<tr>
<td>hfdgh dfhdfhfdgh fh</td>
<td>hfdgh dfhdfhfdgh fh</td>
<td><a>approve</a></td>
</tr> 
</table>
 
</div>
<script>
	$(document).ready(function () {
		 $(".lowAlertBox").click(function() {
		      $("#customerfeedbackTable").overlay().load();
		  });
		 
		 $(".highAlertBox").click(function() {
		      $("#yourfeedbackTable").overlay().load();
		  });

		    // select the overlay element - and "make it an overlay"
		  $(".feedbackTable").overlay({

		    // custom top position
		    top: 260,

		    // some mask tweaks suitable for facebox-looking dialogs
		    mask: {

		    // you might also consider a "transparent" color for the mask
		    color: '#fff',

		    // load mask a little faster
		    loadSpeed: 200,

		    // very transparent
		    opacity: 0.5
		    },

		    // disable this for modal dialog-type of overlays
		    closeOnClick: false

		});
		  
        $('#customtable').jtable({
        	defaultDateFormat: 'dd/mm/yy',
        	paging: true,
        	pagesize: 10,
        	pageList: 'minimal',
        	sorting: 'true',
            title: 'Lista Servizi',
            toolbar: {
            	 hoverAnimation: true, //Enable/disable small animation on mouse hover to a toolbar item.
            	 hoverAnimationDuration: 60, //Duration of the hover animation.
           	     hoverAnimationEasing: undefined, //Easing of the hover animation. Uses jQuery's default animation ('swing') if set to undefined.
            	    
                items: [{
                    icon: '/images/excel.png',
                    text: 'Export to Excel',
                    click: function () {
                        //perform your custom job...
                    }
                },{
                    icon: '/images/pdf.png',
                    text: 'Export to Pdf',
                    click: function () {
                        //perform your custom job...
                    }
                }]
            },
            actions: {
                listAction: '<%=request.getContextPath()%>/areaPubblica/ajax/loadFeedback.html'
            },
            fields: {
                idUserInse: {
                    key: true,
                    list: false,
                    create: false,
                    edit: false
                },
                nomeUserInse: {
                    title: 'Id',
                    width: '4%',
                    create: false,
                    edit: false
                },    
                tipoFeedback: {
                    title: 'tipoFeedback',
                    create: false,
                    edit: false
                },
                
                feedback: {
                    title: 'feedback',
                    create: false,
                    edit: false
                }
                    
            },
            //Initialize validation logic when a form is created
            formCreated: function (event, data) {
				console.log($(data.form).attr("id"));
                data.form.validationEngine();
            },
            //Validate form when it is being submitted
            formSubmitting: function (event, data) {
                return data.form.validationEngine('validate');
            },
            //Dispose validation logic when form is closed
            formClosed: function (event, data) {
			
                data.form.validationEngine('hide');
                //data.form.validationEngine('detach');
            }
        });
        
        $('#customtable').jtable('load');

      
        
    });
    
    
    function checkData(field, rules, i, options){
	
	console.log(field.attr("secondValidationCall"));
	
	if(field.attr("secondValidationCall")!=null && field.attr("secondValidationCall")){
		 var pattern = /^(0?[1-9]|[12][0-9]|3[01])[\/\-\.](0?[1-9]|1[012])[\/\-\.]([0-9]{4})$/; 
    		    var str = field.val();
				//alert(str);
    		    // if (!str.match(pattern)) {
    	    	     // return options.allrules.validate2fields.alertText;

    		    // }
				console.log(str);
				if(str===""){
				console.log("innnn");
					//alert("innnn");
					rules.push('required');  
					//return options.allrules.validate2fields.alertText;
				}
		field.attr({"secondValidationCall":""});
	}
	else{
		setTimeout(function(){
			field.attr({"secondValidationCall":"secondValidationCall"});
			$('#jtable-create-form').validationEngine('validateField', '#Edit-dataJson'); 
			
		},1000);
    }    
    	     // this allows the use of i18 for the error msgs
   }
</script>